<template>
 <div class="main">
       <slot></slot>
 </div>
</template>

<script>
export default {
 data () {
 return {

   }
 },

 components: {},

 methods: {}
}
</script>

<style scoped>
.top{
    width: 250px;
    /* height: 300px; */
    border: 0px solid black;
   
    background-color: antiquewhite;
    border-radius:20px ;
}
.top h3{
    background-color: skyblue;
    height: 40px;
    color: white;
    font-size: 15px;
    line-height: 40px;
    margin: 0;
    padding-left: 10px;
    border-top-left-radius:20px ;
    border-top-right-radius:20px ;
}
.ls{
    /* border: 1px solid black; */
    margin: 0;
    padding: 10px 15px;
}
.ls li{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid black;
}
.ls li span:first-child{
    background-color: #ccc;
}
.people{
    width: 250px;
    background-color:beige;
    
    box-sizing: border-box;
    border-radius:20px ;
}
.people h3{
   height: 40px;
    color: white;
    font-size: 15px;
    line-height: 40px;
    background-color: skyblue;
    padding-left:10px ;
    border-top-left-radius:20px ;
    border-top-right-radius:20px ;
}
.pl{
    padding: 0;
    border-bottom: 0px solid black;
    padding: 10px 15px;
}
.pl li{
    list-style: none;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
}

.left p:first-child span{
    font-size: 18px;
    color: black;
}
.left p:nth-child(2),:last-child{
    font-size: 10px;
    color: gray;
}
.right p{
    background-color: skyblue;
    width: 50px;
    height: 25px;
    border-radius: 20px;
    text-align: center;
    line-height: 25px;
}
</style>